<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <div id="count"></div>
  <div id="A"></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    // 生命周期入门
    class Life extends React.Component {
      state = {opacity: 1}
      handleClick = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      // 组件挂载完毕
      componentDidMount() {
        this.id = setInterval(() => {
          let {opacity} = this.state
          opacity -= 0.1
          if (opacity <= 0) {
            opacity = 1
          }
          this.setState({opacity})
        }, 200)
      }
      // 组件将要卸载
      componentWillUnmount() {
        clearInterval(this.id)
      }
      // 初始化渲染、状态更新
      render() {
        return (
          <div>
            <h1 style={{opacity:this.state.opacity}}>点击按钮我会消失</h1>
            <button onClick={this.handleClick}>消失</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Life/>, document.getElementById('test'))

    // 旧的生命周期
    class Count extends React.Component {
      constructor(props) {
        console.log('count constructor');
        super(props)
        this.state = {
          count: 0
        }
      }

      handleClick = () => {
        let {count} = this.state
        count++
        this.setState({count: count})
      }
      handleUnmount = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('count'))
      }
      // render之前执行
      componentWillMount() {
        console.log('count componentWillMount');
      }
      // render之后执行
      componentDidMount() {
        console.log('count componentDidMount');
      }
      componentWillUnmount() {
        console.log('count componentWillUnmount');
      }
      // 由setState触发 返回true才更新 返回false不更新
      shouldComponentUpdate() {
        console.log('count shouldComponentUpdate setState is called')
        return true
      }
      // 由setState/forceUpdate触发 render之前执行
      componentWillUpdate() {
        console.log('count componentWillUpdate setState / forceUpdate is called')
      }
      // render之后执行
      componentDidUpdate() {
        console.log('count componentDidUpdate')
      }
      // 初始化和更新的时候执行 1+n
      render() {
        console.log('count render');
        return (
          <div>
            <h1>当前值：{this.state.count}</h1>
            <button onClick={this.handleClick}>点击</button>
            <button onClick={this.handleUnmount}>卸载组件</button>
            {/*不执行shouldComponentUpdate*/}
            <button onClick={() => {this.forceUpdate()}}>强制更新</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Count/>, document.getElementById('count'))

    // 父子组件生命周期
    class A extends React.Component {
      state = {carName: 'BMW'}
      render() {
        return (
          <div>
            <div>我是A爸</div>
            {/*传递新的props的时候才执行componentWillReceiveProps*/}
            <button onClick={() => {this.setState({carName: '奥迪'})}}>换车</button>
            {/*第一次接收的props不执行componentWillReceiveProps*/}
            <B carName={this.state.carName}/>
          </div>
        )
      }
    }
    class B extends React.Component {
      componentWillReceiveProps() {
        console.log('B componentWillReceiveProps');
      }
      render() {
        return (
          <div>我是B子，我拿到的车是{this.props.carName}</div>
        )
      }
    }
    ReactDOM.render(<A/>, document.getElementById("A"))
  </script>
</body>
</html>

<!--
  旧的生命周期流程
  挂载时                    父组件render
  constructor               componentWillReceiveProps
  componentWillMount        shouldComponentUpdate【setState】
                            componentWillUpdate【forceUpdate】
  render                    render
  componentDidMount         componentDidUpdate
  componentWillUnmount      componentWillUnmount


  初始化：constructor、componentWillMount、render、componentDidMount（初始化）【初次渲染】
  更新：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate【父组件render或者setState】
  卸载：componentWillUnmount（收尾）【ReactDOM.unmountComponentAtNode】
 -->